<!--
 * @Description: 
 * @Author: zhuying
 * @Date: 2024-11-18 08:45:10
 * @LastEditors: rendc
 * @LastEditTime: 2024-11-18 09:09:51
-->
<template>
    <div class="login-wrapper">
      <!-- <h2 class="login-title">Login</h2> -->
      <div class="input-group">
        <label>用户名</label>
        <input v-model.trim="username" placeholder="请输入账号" />
      </div>
      <div class="input-group">
        <label>密码</label>
        <input v-model.trim="password" type="password" placeholder="请输入密码" />
      </div>
      
      
      <button @click="login" class="login-btn">登录</button>
      <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
      <p class="register-link">没有账号？<a href="#" @click.prevent="toggleForm">立即注册</a></p>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        username: '',
        password: '',
        errorMessage: '',
        Email: '',
        name: '',
        number: '',
        verificationCode: '',
        imgCodeUrl: '1.jpg' // 假设验证码图片的路径
      };
    },
    methods: {
      login() {
        if (this.username === 'admin' && this.password === '123') {
          alert('登录成功！');
        } else {
          this.errorMessage = '登录失败，请检查账号密码。';
        }
      },
      toggleForm() {
        this.$emit('toggleForm');
      }
    }
  };
  </script>
  
  <style scoped>
  .login-wrapper {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: #e8e2e2;
    border: 0px solid #ddd;
    border-radius: 5px;
  }
  
  .login-title {
    text-align: center;
    margin-bottom: 20px;
  }
  
  .input-group {
    margin-bottom: 15px;
  }
  
  .input-group label {
    display: block;
    font-weight: bold;
  }
  
  .login-btn {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .error-message {
    color: red;
    font-size: 14px;
    margin-top: 10px;
  }
  
  .register-link {
    text-align: center;
    margin-top: 20px;
  }
  
  .register-link a {
    color: #007bff;
  }
  </style>